<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            v-show 通过控制 css 的 行内 style，完成 diplay:none 的写入和删除实现元素的显示隐藏
                ==> v-show 属于css的操作
            v-if 通过控制对应元素的删除和创建添加，完成视觉上的显示和隐藏但实际上是元素的删除和创建
                ==> v-if 属于DOM的操作

            v-show 的效率 高于 v-if
            v-if 的数据安全 高于 v-show
         -->
        <input type="button" :value=" 'show|hide('+flag+')' " @click=" flag=!flag ">
        <br>
        <p v-show=" flag ">v-show</p>
        <hr>
        <p v-if=" flag ">v-if</p>

        <br>
        
        <input type="button" value="user.skill=null" @click=" user.skill=null ">
        <br>
        <p>name:{{ user.name }}</p>
        <!-- <p v-show=" user.skill ">技能1：{{ user.skill[0] }}</p> -->
        <p v-if=" user.skill ">技能1：{{ user.skill[0] }}</p>
        <p v-if=" user.skill ">技能2：{{ user.skill[1] }}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                flag:true,
                user:{
                    name:"tom",
                    skill:["html","js"]
                }
            }
        })
    </script>
</body>
</html>